<template>
  <div>
        <h1>Scrollbar 滚动条</h1>
        <p>简约好看的滚动条</p>
        <div>
            <h2>基础用法</h2>
            <p>通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-scrollbar height="400px" @onscroll="handleScroll">
                            <p v-for="item in 20" :key="item" class="scrollbar-item">{{ item }}</p>
                        </mo-scrollbar>
                    </div>
                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="vue">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>横向滚动</h2>
            <p>当元素宽度大于滚动条宽度时，会显示横向滚动条。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-scrollbar>
                            <div style="display:flex">
                                <p v-for="item in 30" :key="item" class="scrollbar-item1">{{ item }}</p>
                            </div>
                        </mo-scrollbar>
                    </div>
                </div>
                <div class="code-box" v-show="button2">
                    <pre v-highlight><code class="vue">{{ code2 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button2=!button2">
                        {{button2?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>最大高度</h2>
            <p>当元素高度超过最大高度，才会显示滚动条。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div style="margin:0 0 10px 10px">
                        <mo-button type="success" @click="addItem">添加</mo-button>
                        <mo-button type="error" @click="deleteItem" style="margin-left:10px">删除</mo-button>
                    </div>
                    <div class="flex-start">
                        <mo-scrollbar maxHeight="400px">
                            <p v-for="item in TestArr" :key="item" class="scrollbar-item">{{ item }}</p>
                        </mo-scrollbar>
                    </div>
                </div>
                <div class="code-box" v-show="button3">
                    <pre v-highlight><code class="vue">{{ code3 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button3=!button3">
                        {{button3?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>属性</h2>
             <el-table 
                :data="attrList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="attr" label="属性"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="type" label="类型"/>
                    <el-table-column property="opt" label="可选值" />
                    <el-table-column property="default" label="默认值"/>
             </el-table>
        </div>

        <div>
            <h2>事件</h2>
             <el-table 
                :data="eventList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="event" label="事件名"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="temp" label="参数"/>
             </el-table>
        </div>
       
    </div>
</template>

<script>
import { computed, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import code from '@/views/component/scrollbar/code';
import attrs from '@/views/component/scrollbar/attrs';
export default {
    name: 'scrollbar',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        const {proxy} = getCurrentInstance();
        let data = reactive({
            button1:false,
            button2:false,
            button3:false,
            TestArr:[1, 2, 3]
        });
        let methods = {
            addItem ()
            {
                data.TestArr.push(data.TestArr.length + 1);
            },
            deleteItem ()
            {
                if(data.TestArr.length > 3)
                {
                    data.TestArr.splice(data.TestArr.length - 1, 1);
                }
            },
            handleScroll ({ scrollTop, scrollLeft })
            {
                // console.log(scrollTop);
            }
        };
        
        return {
            ...code,
            ...toRefs(data),
            ...attrs,
            ...methods
        };
    }
};

</script>
<style lang='scss' scoped>
.scrollbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ffecec;
  color: #ff8740;
}

.scrollbar-item1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ffe9f5;
  color: #ff8740;
}
</style>
